<template>
  <div class="Search">
    <el-row>
      <el-col :span="6" :offset="3">
        <router-link class="logo" to='/'>
          <img class="logo-img" src="static\img\logo\logo.png" alt="Logo"> <!-- 替换为你的 logo 图片路径 -->
          集市交易平台
        </router-link>
      </el-col>
      <el-col :span="8">
        <div class="inpbtn">
          <input type="text" v-model="serachText">
          <button @click="SearchText">搜索</button>
        </div>
      </el-col>
      <el-col :span="6">
        <span class="userImg" @click="gotoMine">
          <img :src="imgPath">
        </span>
        <span class="userName" v-if="isNotLogin" @click="gotoLogin('login')">登录</span>
        <span class="userName" v-if="isNotLogin" @click="gotoLogin('register')">注册</span>
        <span class="userName" v-if="!isNotLogin" @click="gotoMine">{{userInfo.username}}</span>
        <span class="userName" v-if="!isNotLogin" @click="gooutLogin()">退出登录</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      userInfo: '',
      serachText: '',//带参查询
      isNotLogin: true,
      imgPath: "../../static/img/akari.jpg",
    }
  },
  created(){
    this.id = this.$store.state.userid;
    //加载用户登录信息
    if(this.id != 0){
      this.$axios.get('/user/selectUserById', {
        params: {
          id : this.$store.state.userid
        }
      }).then(res => {
        this.userInfo = res.data;
        this.isNotLogin = false;
        if(res.data.userimgpath != null){
          this.imgPath = res.data.userimgpath;
        }
      })
    }
  },
  methods: {
    //跳转我的账户页面
    gotoMine () {
      //判断用户是否登录
      if(this.id == 0){
        this.$message({
          message: '请登录',
          type: 'success'
        });
      }else{
        this.$router.push({ name: 'mine' });
      }
    },
    //跳转登陆页面
    gotoLogin(data){
      this.$router.push({
        name: 'login',
        query: {
          name: data
        },
      });
    },

    //退出登录
    gooutLogin(){
      var StringStore = sessionStorage.getItem("store")
      var JsonStore = JSON.parse(StringStore)
      var userId = JsonStore.userid
      this.$axios.get("/user/outLogin",{
        params: {
          userId : userId
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.$store.commit('userInfo',0);
          this.$router.push({
            name: 'login',
            query: {
              name: 'login'
            },
          })
          this.$message({
            message: '登出成功！',
            type: 's'
          });
        }else{
          // this.$store.commit('userInfo',0);
          this.$message({
            message: '登出失败！',
            type: 'warning'
          });

        }
      }).catch(()=>{
        this.$message({
          message: '发生异常,请联系管理员！',
          type: 'warning'
        });
      })
    },

    SearchText(){
      this.$router.push({
        name: 'productType',
        query: {
          id: 0,
          serachText:this.serachText
        },
      });
    }
  }
}
</script>

<style scoped="scoped">
.Search {
  height: 64px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.Search .el-row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo区域 */
.Search .el-col:first-child {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 20px;
  color: #303133;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.logo-img {
  width: 52px; /* 根据你的 logo 大小调整 */
  height: 52px; /* 根据你的 logo 大小调整 */
  margin-right: 20px; /* 调整 logo 与文字之间的间距 */
  border-radius: 50%;
}

.logo:hover {
  color: #409EFF;
}

/* 搜索区域 */
.inpbtn {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 460px;
}

.inpbtn input {
  flex: 1;
  height: 36px;
  padding: 0 16px;
  border: 1px solid #dcdfe6;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  color: #606266;
  background: #ffffff;
  transition: all 0.3s;
}

.inpbtn input:focus {
  outline: none;
  border-color: #409EFF;
}

.inpbtn button {
  height: 36px;
  padding: 0 20px;
  color: #ffffff;
  font-size: 14px;
  border: none;
  background-color: #409EFF;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.inpbtn button:hover {
  background-color: #66b1ff;
}

/* 用户区域 */
.Search .el-col:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.userImg {
  margin-right: 12px;
  cursor: pointer;
}

.userImg img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ebeef5;
  transition: all 0.3s;
}

.userImg img:hover {
  border-color: #409EFF;
  transform: scale(1.05);
}

.userName {
  margin-left: 8px;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s;
}

.userName:hover {
  color: #409EFF;
}

/* 响应式布局 */
@media (min-width: 1200px) {
  .Search .el-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

@media (max-width: 1199px) {
  .Search .el-row {
    padding: 0 20px;
  }
}

@media (max-width: 991px) {
  .logo {
    font-size: 18px;
  }

  .inpbtn {
    max-width: 360px;
  }
}

@media (max-width: 767px) {
  .Search {
    height: auto;
    padding: 12px 0;
  }

  .Search .el-row {
    flex-direction: column;
    padding: 0 16px;
  }

  .Search .el-col {
    width: 100% !important;
    margin: 0 !important;
    justify-content: center;
    margin-bottom: 12px !important;
  }

  .Search .el-col:last-child {
    margin-bottom: 0 !important;
    justify-content: center;
  }

  .inpbtn {
    max-width: 100%;
  }

  .logo {
    margin-bottom: 12px;
  }
}

@media (max-width: 479px) {
  .Search {
    padding: 10px 0;
  }

  .logo {
    font-size: 16px;
  }

  .inpbtn input,
  .inpbtn button {
    height: 34px;
  }

  .inpbtn button {
    padding: 0 16px;
  }

  .userImg img {
    width: 28px;
    height: 28px;
  }

  .userName {
    font-size: 13px;
  }
}
</style>
